<template>
  <div>
    <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="rules">
      <a-form-model-item label="商品" prop="name">
        <div>
          <a-button type="primary" @click="visible = true">添加商品</a-button>
          <a-button style="margin-left: 8px" :disabled="createImgFlag" @click="handleCreateImg">生成搭配图</a-button>
          <a-table
            style="margin-top: 20px"
            :rowKey="record => JSON.stringify(record)"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :columns="columns"
            :data-source="productList"
            :pagination="false"
          >
            <span class="product-wrapper" slot="product" slot-scope="item">
              <img slot="cover" class="img" :src="item.imgurl" :alt="item.value" v-if="item.imgurl" />
              <img slot="cover" class="img" :alt="item.value" src="https://img.bzhz.jnbygroup.com/cloth.png" v-else />
              <div class="text">
                <div class="t">{{ item.value }}</div>
                <div class="t">{{ item.name }}</div>
                <div class="t">{{ item.colorno }}/{{ item.color_name }}</div>
              </div>
            </span>
            <span slot="action" slot-scope="text, record, index">
              <a-icon type="delete" @click="handleDeleteProduct(record, index)" />
            </span>
          </a-table>
        </div>
      </a-form-model-item>
      <a-form-model-item label="商品标签">
        <a-tag style="margin: 2px" color="blue" v-for="label in labelList" :key="label.key">
          {{ label.value }}
        </a-tag>
      </a-form-model-item>
    </a-form-model>
    <slot name="formItem" :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol"></slot>
    <slot name="formFooter" :form="form"></slot>
    <a-drawer title="商品库" :width="840" :zIndex="4" @close="visible = false" :visible="visible" :destroyOnClose="true">
      <Product :isEmit="true" @add="handleAddProduct" :gender="-1" :allowGetTag="false" :allowGetPrice="false"></Product>
    </a-drawer>
    <konva-img :konvaImgVisible.sync="konvaImgVisible" :createStylingList="createStylingList"></konva-img>
  </div>
</template>
<script>
import Product from '@views/box/workbench/fashioner/module/product'
import KonvaImg from '@views/box/boxLook/components/KonvaImg'
import { queryBatchProductSkcMatted, selectGoodsList } from '@api/box/boxLook'
import { mixin } from '../mixin'

const columns = [
  {
    title: '序号',
    width: 100,
    customRender: (text, record, index) => `${index + 1}`
  },
  {
    title: '商品',
    width: 250,
    scopedSlots: { customRender: 'product' }
  },
  {
    title: '操作',
    align: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  mixins: [mixin],
  components: {
    Product,
    KonvaImg
  },
  data() {
    return {
      columns,
      form: {},
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      visible: false,
      productList: [],
      createImgFlag: false,
      konvaImgVisible: false,
      selectedRowKeys: [],
      labelList: [],
      createStylingList: [],
      arcList: [],
      bigList: [],
      smallList: [],
      seasonList: [],
      yearList: [],
      bandList: []
    }
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    // 新增
    handleAddProduct(v) {
      let ids = this.productList.map(e => e.id + e.colorno)
      if (ids.includes(v.id + v.colorno)) {
        this.$message.error('不可重复添加相同的商品！')
        return
      }
      this.productList.push(v)
      this.$emit('productChange', this.productList)
      let arcList = [] //品牌
      let bigList = [] //大类
      let smallList = [] // 小类
      let seasonList = [] //季节
      let yearList = [] //年份
      let bandList = [] // 波段
      this.productList.forEach(item => {
        let arcTemp = {
          key: item.c_arcbrand_id,
          value: item.brand
        }
        arcList.push(arcTemp)

        let bigTemp = {
          key: item.m_big_category_id,
          value: item.m_big_category
        }
        bigList.push(bigTemp)

        let smallTemp = {
          key: item.m_small_category_id,
          value: item.m_small_category
        }
        smallList.push(smallTemp)

        let seasonTemp = {
          key: item.small_season_id,
          value: item.small_season
        }
        seasonList.push(seasonTemp)

        let yearTemp = {
          key: item.year,
          value: item.year
        }
        yearList.push(yearTemp)

        let bandTemp = {
          key: item.m_band,
          value: item.m_band
        }
        bandList.push(bandTemp)
      })

      this.arcList = this.removal(arcList) // 品牌
      this.bigList = this.removal(bigList) //大类
      this.seasonList = this.removal(seasonList) //季节
      this.yearList = this.removal(yearList) // 年份
      this.smallList = this.removal(smallList) // 小类
      this.bandList = this.removal(bandList) // 波段

      this.labelList = [...this.arcList, ...this.bigList, ...this.seasonList, ...this.yearList, ...this.smallList, ...this.bandList]
    },
    // 删除
    handleDeleteProduct(record, index) {
      this.productList.splice(index, 1)
      this.$emit('productChange', this.productList)
      let falg = this.productList.some(item => {
        return item.c_arcbrand_id == record.c_arcbrand_id
      })

      if (!falg) {
        this.arcList = this.arcList.filter(item => {
          return item.key != record.c_arcbrand_id
        })
      }
      let falg1 = this.productList.some(item => {
        return item.year == record.year
      })
      if (!falg1) {
        this.yearList = this.yearList.filter(item => {
          return item.key != record.year
        })
      }

      let falg2 = this.productList.some(item => {
        return item.m_big_category_id == record.m_big_category_id
      })

      if (!falg2) {
        this.bigList = this.bigList.filter(item => {
          return item.key != record.m_big_category_id
        })
      }

      let falg3 = this.productList.some(item => {
        return item.m_small_category_id == record.m_small_category_id
      })

      if (!falg3) {
        this.smallList = this.smallList.filter(item => {
          return item.key != record.m_small_category_id
        })
      }
      let falg4 = this.productList.some(item => {
        return item.small_season_id == record.small_season_id
      })
      if (!falg4) {
        this.seasonList = this.seasonList.filter(item => {
          return item.key != record.small_season_id
        })
      }

      let falg5 = this.productList.some(item => {
        return item.m_band == record.m_band
      })
      if (!falg5) {
        this.bandList = this.bandList.filter(item => {
          return item.key != record.m_band
        })
      }
      this.labelList = [...this.arcList, ...this.bigList, ...this.seasonList, ...this.yearList, ...this.smallList, ...this.bandList]
    },
    // 生成搭配图
    handleCreateImg() {
      if (this.selectedRowKeys.length < 1) {
        this.$message.error('至少选一件！')
        return
      }
      if (this.selectedRowKeys.length > 3) {
        this.$message.error('最多只能选择三件！')
        return
      }
      const productList = this.selectedRowKeys.map(e => JSON.parse(e))
      const productColors = productList.map(item => {
        return {
          colorNo: item.colorno,
          productId: item.id
        }
      })
      const data = {
        requestData: {
          productColors: productColors
        }
      }
      this.createImgFlag = true
      queryBatchProductSkcMatted(data)
        .then(res => {
          console.log(res.data, 'data')
          if (res.code == 0) {
            this.createStylingList = list
            this.createImgFlag = false
            this.konvaImgVisible = true
          } else {
            this.createImgFlag = false
            this.$message.error(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 去重
    removal(arr) {
      let obj = {}
      arr = arr.reduce((item, next) => {
        obj[next.key] ? '' : (obj[next.key] = true && item.push(next))
        return item
      }, [])
      return arr
    },
    // 回显
    setData(value) {
      value.forEach(info => {
        info.extendJson = JSON.parse(info.extendJson)
      })
      this.productList = value.map(e => {
        return {
          brand: e.productBrandId,
          c_arcbrand_id: e.arcBrandId,
          name: e.productCode,
          value: e.productName,
          color_name: e.extendJson.productColorName,
          colorno: e.productColor,
          id: e.productId,
          imgurl: e.extendJson.productImage,
          m_small_category_id: e.smallCategory,
          m_band: e.productBand,
          m_big_category_id: e.bigCategory,
          small_season_id: e.season,
          year: e.years
        }
      })
      let list = value.map(item => item.productCode)
      this.getList(list)
    },
    // 查询商品接口
    getList(list) {
      console.log(list, 'list')
      const data = {
        requestData: {
          names: list
        }
      }
      selectGoodsList(data).then(res => {
        // console.log(res)
        if (res.code === 0) {
          console.log(res.data, 'data')
          console.log(this.productList, 'this.productList')

          let brandInfo = res.data.map(e => {
            const newItem = {
              key: e.c_arcbrand_id,
              value: e.brand
            }
            return newItem
          })
          let yearList = res.data.map(e => {
            const newItem = {
              key: e.year,
              value: e.year
            }
            return newItem
          })
          let bigList = res.data.map(e => {
            const newItem = {
              key: e.m_big_category_id,
              value: e.m_big_category
            }
            return newItem
          })
          let smallList = res.data.map(e => {
            const newItem = {
              key: e.m_small_category_id,
              value: e.m_small_category
            }
            return newItem
          })
          let seasonList = res.data.map(e => {
            const newItem = {
              key: e.small_season_id,
              value: e.small_season
            }
            return newItem
          })
          let bandList = res.data.map(e => {
            const newItem = {
              key: e.m_band,
              value: e.m_band
            }
            return newItem
          })
          this.arcList = this.removal(brandInfo) // 品牌
          this.bigList = this.removal(bigList) //大类
          this.seasonList = this.removal(seasonList) //季节
          this.yearList = this.removal(yearList) // 年份
          this.smallList = this.removal(smallList) // 小类
          this.bandList = this.removal(bandList) // 波段
          this.labelList = [...this.arcList, ...this.bigList, ...this.seasonList, ...this.yearList, ...this.smallList, ...this.bandList]
          res.data.forEach(item => {
            this.productList.forEach(info => {
              if (item.colorno == info.colorno) {
                info.m_small_category = item.m_small_category
                info.m_big_category = item.m_big_category
                info.small_season = item.small_season
              }
            })
          })
          this.$emit('productChange', this.productList)
          console.log(this.productList, ' this.productList')
        }
      })
    },
    reset() {
      this.productList = []
      this.labelList = []
    }
  }
}
</script>
<style lang="less" scoped>
.product-wrapper {
  display: flex;
  .img {
    display: block;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
  }
  .text {
    flex: 1;
    margin-left: 10px;
    line-height: 20px;
    font-size: 12px;
    color: #333;
    .t {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      word-break: break-all; /* 追加这一行代码 */
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
    }
  }
}
.footer-box {
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  background-color: #fff;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/deep/ .size-box {
  display: none !important;
}
/deep/.ant-pro-pages-list-projects-cardList .cardItemContent {
  padding: 0px 0px 20px;
}
/deep/.ant-pro-pages-list-projects-cardList .cardItemContent .price {
  display: none;
}
/deep/.ant-pro-pages-list-projects-cardList .cardItemContent .blue {
  display: none;
}
/deep/ .ant-pro-pages-list-projects-cardList .ant-card-body {
  min-height: 0;
}
</style>

